{% extends 'layout.html' %}
{% load static %}
{% block css %}
    <style>
        .hot-list {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .hot-list th {
            background: #f8f9fa;
            color: #606266;
            font-weight: 500;
            padding: 16px;
            text-align: left;
        }

        .hot-list td {
            padding: 16px;
            border-bottom: 1px solid #ebeef5;
        }

        .rank {
            display: inline-block;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #f0f2f5;
            text-align: center;
            line-height: 24px;
            margin-right: 12px;
        }

        .rank.top3 {
            background: #fe2c55;
            color: white;
        }

        .hot-value {
            color: #fe2c55;
            font-weight: 500;
            white-space: nowrap;
        }

        .topic-text {
            color: #181818;
            transition: color 0.3s;
        }

        @media (max-width: 768px) {
            .hot-list td, .hot-list th {
                padding: 12px;
            }

            .video-count {
                display: none;
            }
        }
    </style>
{% endblock %}

{% block content %}
    <h2 style="text-align: center">抖音热搜榜单排行</h2>
    {# 修改模板中视频数列为时间列 #}
    <table class="hot-list">
        <thead>
        <tr>
            <th style="width: 70px;">排名</th>
            <th>热搜话题</th>
            <th style="width: 100px;">热度值</th>
            <th style="width: 180px;">上榜时间</th>
            {# 修改列标题 #}
        </tr>
        </thead>
        <tbody>
        {% for item in hot_items %}
            <tr>
                <td>
                <span class="rank {% if item.rank <= 3 %}top3{% endif %}">
                    {{ item.rank }}
                </span>
                </td>
                <td>
                <span class="topic-text">
                    {{ item.keyword }}
                </span>
                </td>
                <td class="hot-value">
                    {{ item.formatted_hot }}
                </td>
                <td class="video-count">  {# 修改为时间显示 #}
                    {{ item.formatted_time }}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    {% if update_time %}
        <div class="update-time" style="text-align: center; color: #666; margin-bottom: 20px;">
            最后更新时间：{{ update_time|date:"Y-m-d H:i:s" }}
        </div>
    {% endif %}
{% endblock %}

{% block js %}
    <script>
        // 自动刷新（每60秒）
        setTimeout(() => {
            window.location.reload();
        }, 60000);
    </script>
{% endblock %}